<template>
  <el-dialog title="点名签到" :close-on-click-modal="false" :destroy-on-close="true" width="600px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-dialogTitle">{{info.lessonProject}}</div>
    <div class="online-item">主讲：{{info.speaker}}</div>
    <div class="online-item">时间：{{info.startTime}} - {{info.endTime}}</div>
    <div class="sign-box" v-for="(item, index) in signs.signList" :key="index">
      <el-button type="text" icon="el-icon-success">{{item.name}}-已签到</el-button>
      <span>{{item.signTime}}</span>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="primary" @click="submitForm" v-if="signs.stuIsSign==='0'" :disabled="isDisabled">签到&nbsp;<i v-if="signs.nowToEndTime>0">{{time}}</i></el-button>
      <el-button type="primary" v-else disabled>已签到&nbsp;<i v-if="signs.nowToEndTime>0">{{time}}</i></el-button>
    </div>
  </el-dialog>
</template>

<script>
import { signInMain, signIn } from '@/api/student/lesson/classroom'
export default {
  props: ['id', 'info'],
  data () {
    return {
      isShow: true,
      signs: {
        signList: [],
        nowToEndTime: 0
      },
      time: undefined,
      isDisabled: false
    }
  },
  methods: {
    async signInMain (data) {
      const res = await signInMain({ activityId: this.id })
      if (res.code === '200') {
        this.signs = res.data
      }
    },
    async signIn (data) {
      this.isDisabled = true
      const res = await signIn(data)
      if (res.code === '200') {
        this.isDisabled = false
        this.$message.success('操作成功')
        // 重新刷新活动列表
        this.$emit('handleEmit', 'confirm')
      } else {
        this.isDisabled = false
        this.$message.error(res.message)
      }
    },
    submitForm () {
      const data = {
        activityId: this.id,
        type: 1
      }
      this.signIn(data)
    },
    closeBox () {
      this.$emit('handleEmit')
    },
    formatSecond () {
      let time = this.signs.nowToEndTime
      let hour
      let minute
      let second
      if (time >= 3600) {
        hour = parseInt(time / 3600)
        minute = parseInt((time - 3600 * hour) / 60)
        second = parseInt(time % 60)
        if (hour < 10) {
          hour = '0' + hour
        }
        if (minute < 10) {
          minute = '0' + minute
        }
        if (second < 10) {
          second = '0' + second
        }
        this.time = hour + ':' + minute + ':' + second
      } else {
        minute = parseInt(time / 60)
        second = parseInt(time % 60)
        if (minute < 10) {
          minute = '0' + minute
        }
        if (second < 10) {
          second = '0' + second
        }
        this.time = minute + ':' + second
      }
      this.signs.nowToEndTime = this.signs.nowToEndTime - 1
      if (this.signs.nowToEndTime === 0) {
        clearInterval(this.timer)
      }
    }
  },
  mounted () {
    this.signInMain()
    this.timer = setInterval(() => {
      this.formatSecond()
    }, 1000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
</style>
